<template>
    <div class="page">
        <nav-bar>
            <!-- 具名插槽 -->
            <template #left>
                <div class="lefts">
                    <van-icon name="arrow-left" @click="$router.go(-1)"></van-icon>
                </div>
            </template>
            <template #center>
                <span>
                    {{ title }}
                </span>
            </template>
        </nav-bar>
        <van-dropdown-menu active-color="#3190e8">
            <van-dropdown-item :title="title" ref="foods">
                <cate :cateList="cateList" @sendId="getId"></cate>
            </van-dropdown-item>
            <van-dropdown-item title="排序" ref="sort">
               <sort @sendId="sortId"></sort>
            </van-dropdown-item>
            <van-dropdown-item title="筛选" ref="filter">
                <filter-shop :latitude="query.latitude" :longitude="query.longitude" @sendIds="getIds"></filter-shop>
            </van-dropdown-item>
        </van-dropdown-menu>
        <div v-if="list.length != 0">
            <div v-for="(item, index) in list" :key="index">
                <shop :shop="item"></shop>
            </div>
        </div>
        <div v-else>
            <img src="../../assets/loading.svg" alt="" v-for="(item, index) in 10" :key="index">
        </div>
    </div>
</template>
<script>
import { getShopList } from '@/api/home';
import { getCateList } from '@/api/cate'
import shop from '@/components/shop/index.vue'
import filterShop from './components/shopFilter.vue'
export default {
    data() {
        return {
            title: "",
            query: {
                latitude: "",
                longitude: "",
                restaurant_category_id: '',
                support_ids: "",
                "restaurant_category_ids[]": "",
                order_by:""
            },
            list: [],
            cateList: []
        }
    },
    components: {
        shop,
        cate: () => import("./components/cate.vue"),
        sort:()=>import("./components/sort.vue"),
        filterShop
    },
    async created() {
        // 获取路由传递的参数
        let { latitude, longitude, cate_id, title } = this.$route.query;
        this.title = title;
        this.query.latitude = latitude;
        this.query.longitude = longitude;
        this.query.restaurant_category_id = cate_id;
        this.getDataList();
        let data = {
            latitude,
            longitude
        }
        // 获取所有分类列表
        let res = await getCateList(data);
        console.log(res)
        this.cateList = res.data;
    },
    methods: {
        async getDataList() {
            let res = await getShopList(this.query);
            console.log(res)
            this.list = res.data;
        },
        getId(id,name) {
            // console.log(name)
            this.title = name;
            this.list = [];
            this.query['restaurant_category_ids[]'] = id;
            this.getDataList();
            this.$refs.foods.toggle();
        },
        // 排序
        sortId(id){
            this.list = [];
            // console.log(id)
            this.query.order_by = id;
            // 排序
            this.getDataList();
            //关闭 下拉菜单
            // console.log(this.$refs.sort)
            this.$refs.sort.toggle();
        },
        // 开始筛选
        getIds(mode,attr){
                  this.list = [];
            mode.forEach(item=>{
                console.log(item.id)
                this.query['delivery_mode[]'] = item.id;
            })
            attr.forEach(item=>{
                this.query['support_ids'] = item.id;
            })
              this.getDataList();
             this.$refs.filter.toggle();
        }
    }
}
</script>
<style lang="less" scoped>
.page {
    background: #fff;
}
</style>